<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
		<title>购物车</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/shop.css" />
		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		[v-clock] {
			display: none;
		}
	</style>

	<body ontouchstart>
		<div id="cart">
			<header class="ui-header">
				<a href="javascript:history.go(-1)" class="mui-action-back ui-icon hd-left">
					<span class="iconfont icon-fanhui"></span>
				</a>
				<div class="ui-title">购物车<span v-show="manages">({{numbers}})</span></div>
				<a href="javascript:;" @click="manage" class="icon-text btn-save hd-right">管理</a>
			</header>
			<div class="ui-content">
				<div class="J_cartBuy">
					<div class="ui-cell ui-cart-cell" v-for="(item,index) in list">
						<label class="check-label" :for="'check'+index" @click="checkds(index)">
							<input type="checkbox" :id="'check'+index" name="checkboxs" v-model="item.checked" class="cart-input" />
						</label>
						<div class="item-img">
							<a href="">
								<img :src="item.subimage1Filename" onerror='this.src="../../images/error-img.png"'>
							</a>
						</div>
						<div class="ui-cell__bd">
							<div class="item-title"><a href="">{{item.goodsTitle}}</a></div>
							<div class="item-attr">
								<span>{{item.specifications}}</span>
							</div>
							<div class="item-foot justify">
								<div class="pay-price">
									￥<span class="o-t-price">{{item.unitPrice}}</span>
								</div>
								<div class="ui-count">
									<a class="ui-count__btn ui-count__decrease" v-on:click="minius(index)">-</a>
									<input class="ui-count__number" type="number" v-model.number="item.purchaseQuantity" style="margin-top:2.5px;" />
									<a class="ui-count__btn ui-count__increase" v-on:click="add(index)">+</a>
								</div>
							</div>
						</div>
					</div>
					<div v-show="manages" class="ui-cell ui-cart-acbar">
						<label class="check-label">
							<input type="checkbox" @click="checkAll" name="cart" class="cart-input" v-model="allChecked" />
							<span>全选</span>
						</label>
						<div class="ui-cell__bd">
							<!-- <div class="cart-pay">
								合计:<span class="cart-pay-price">￥{{sum.toFixed(2)}}</span>
							</div> -->
						</div>
						<a href="javascript:(0)" @click="deletes" class="ui-btn ui-btn-cartbuy">删除</a>
					</div>
					<div v-show="!manages" class="ui-cell ui-cart-acbar">
						<label class="check-label">
							<input type="checkbox" @click="checkAll" name="cart" class="cart-input" v-model="allChecked" />
							<span>全选</span>
						</label>
						<div class="ui-cell__bd">
							<div class="cart-pay">
								合计:<span class="cart-pay-price">￥{{sum.toFixed(2)}}</span>
							</div>
						</div>
						<a href="javascript:(0)" class="ui-btn ui-btn-cartbuy">结算(<span class="cartNumber">{{checkNum}}</span>)</a>
					</div>
				</div>
			</div>
		</div>
		<script>
			var cart; //Vue对象
			function createVue(list) {
				cart = new Vue({
					el: '#cart',
					data: {
						list: list,
						checkeds: new Array(list.length),
						manages: false,
						numbers: 0,
						allChecked: false
					},
					computed: {
						sum: function() {
							let sum = 0;
							for (let i in this.list) {
								if (this.list[i].checked)
									sum += this.list[i].unitPrice * this.list[i].purchaseQuantity;
							}
							return sum;
						},
						checkNum: function() {
							let num = 0;
							for (let i in this.list) {
								if (this.list[i].checked) {
									num++;
								}
							}
							return num;
						}
					},
					methods: {
						del: function(index) {
							this.list.splice(index, 1);
							this.checkeds.splice(index, 1); //同时删除对应的选中状态标识
						},
						add: function(index) {
							this.list[index].purchaseQuantity++;
						},
						minius: function(index) {
							if (this.list[index].purchaseQuantity > 1) {
								this.list[index].purchaseQuantity--;
							}
						},
						checkAll: function() {
							if (this.allChecked != false) {
								for (let i = 0; i < this.list.length; i++) {
									this.list[i].checked = false;
								}
							} else {
								for (let i = 0; i < this.list.length; i++) {
									this.list[i].checked = true;
								}
							}

						},
						manage: function() {
							this.manages = !this.manages;

						},
						deletes: function() {
							var t = 0
							var lists = []
							for (let i = 0; i < this.list.length; i++) {
								if (!this.list[i].checked) {
									lists.push(
										this.list[i]
									)
								}
							}
							this.list = lists
							for (let i = 0; i < this.list.length; i++) {
								if (this.list[i].checked) {
									t++
								}
							}
							this.numbers = t;
						},
						checkds: function(e) {
							var t = 0
							this.list[e].checked = !this.list[e].checked
							for (let i = 0; i < this.list.length; i++) {
								if (this.list[i].checked) {
									t++
								}
							}
							if (t == this.list.length) {
								this.allChecked = true
							} else {
								this.allChecked = false
							}
							this.numbers = t;
						}
					}
				});
			}
			window.onload = function() {
				//请求后台代码   。。。。
				//请求成功后将获得的list赋值给cart的list
				let list = [{
						goodsTitle: "净重20斤纯手工水饺批发蒸饺煎饺饺子早餐饭店可混搭顺丰冷运包邮", //商品名
						specifications: "大包", //商品规格
						unitPrice: "10", //商品单价
						subimage1Filename: "../../images/1.jpg", //商品图片名
						purchaseQuantity: 1,
						checked: false
					},
					{
						goodsTitle: "净重20斤纯手工水饺批发蒸饺煎饺饺子早餐饭店可混搭顺丰冷运包邮",
						specifications: "大包",
						unitPrice: "10",
						subimage1Filename: "../../images/2.jpg",
						purchaseQuantity: 1,
						checked: false
					},
					{
						goodsTitle: "净重20斤纯手工水饺批发蒸饺煎饺饺子早餐饭店可混搭顺丰冷运包邮",
						specifications: "20盒装",
						unitPrice: "10",
						subimage1Filename: "../../images/3.jpg",
						purchaseQuantity: 1,
						checked: false
					}
				]
				createVue(list);
			}
		</script>
	</body>

</html>
